<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="/static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
    <script src="/static/js/china.js" th:src="@{js/map/hubei.js}"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>湖北疫情分布图</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" th:href="@{/css/dashboard.css}" rel="stylesheet">
</head>

<body>

<!--引入topbar-->
<div th:replace="~{commons/bar::topbar}"></div>
<div class="container-fluid">
    <div class="row">
        <!--引入sidebar-->
        <div th:replace="~{commons/bar::#sidebar(activeUri='dashboard')}"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div style="width: 1218px; height: 400px; padding: 0">
                <div id="container1" style="width: 100%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container1'));
                    var base = +new Date(2020, 0, 19);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }
                    option = {
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                       dataView : {
                                    show : true,
                                    readOnly : true,
                                    optionToContent : function(opt) {
                                        //console.info(opt);
                                        var axisData = opt.xAxis[0].data;
                                        var series = opt.series;
                                        var tdHeaders = '<td>时间</td>'; //表头
                                        series.forEach(function(item) {
                                            tdHeaders += '<td>' + item.name + '</td>'; //组装表头
                                        });
                                        var table = '<div class="table-responsive"><table class="table table-bordered table-striped table-hover" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
                                        var tdBodys = ''; //数据
                                        for (let i = 0, l = axisData.length; i < l; i++) {
                                            for (let j = 0; j < series.length; j++) {
                                                tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
                                            }
                                            table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                            tdBodys = '';
                                        }

                                        table += '</tbody></table></div>';
                                        return table;
                                    }
                                },
                                restore:{},
                                saveAsImage: {}
                            }
                        },
                        title: {
                            text: '现存确诊'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['现存确诊']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },

                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '现存确诊',
                                type: 'line',
                                stack: '总量',
                                data: [239, 338, 399, 494, 658, 958, 1303, 2567, 3349, 4334, 5486, 6738,
                                    8565, 10532, 12712, 15679, 18483, 20677, 23139, 24881, 26965, 28532, 29659, 43455, 46429, 48175, 49030, 49847, 50338, 50633, 49665, 48730, 47647, 46439, 45054, 43369, 41660, 39755, 36829, 34715, 32959, 30543, 28216, 25905, 24085, 22695, 21239, 19710, 18303, 17151, 15671, 14427, 13171, 11772, 10431, 9605, 8701, 7795, 6992, 6287, 5719, 5224, 4768, 4318, 3828, 3431, 2896, 2526, 2054, 1733, 1461, 1283, 1132, 987, 834, 648, 577, 518, 448, 401, 351, 320, 303, 244]
                            }
                        ]
                    };

                    myChart.setOption(option)
                </script>
                <div style="width: 1218px; height: 100px; padding: 0; text-align: center">
                    <table class="table table-hover table-bordered  table-sm" style="text-align:center; width:
                700px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                现存确诊分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>现存确诊</td>
                            <td>自1/20至2/18呈上升趋势，之后确诊人数逐步下降</td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>

            <div style="width: 1218px; height: 500px; padding: 0">
                <div id="container2" style="width: 100%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container2'));
                    var base = +new Date(2020, 0, 19);
                    var date = []
                    var oneDay = 24 * 3600 * 1000;
                    var data1 = [270, 105, 69, 105, 180, 323, 371, 1291, 840, 1032, 1220, 1347, 1921, 2103,
                        2345, 3156, 2987, 2447, 2841, 2147, 2531, 2097, 1638, 14840, 3780, 2420, 1843, 1933, 1807, 1693, 349, 631, 792, 630, 203, 499, 401, 409, 318, 423, 570, 196, 114, 115, 134, 126, 74, 41, 36, 17, 13, 8, 5, 4, 4, 4, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                    var data2 = [6, 3, 8, 7, 15, 13, 24, 24, 25, 37, 42, 45, 45, 56, 64, 65, 70, 69, 81,
                        81, 91, 103, 94, 242, 116, 31, 139, 100, 93, 132, 108, 115, 106, 96, 149, 68, 52, 26, 41, 45, 34, 42, 31, 37, 31, 29, 28, 27, 21, 17, 22, 10, 6, 13, 10, 14, 12, 11, 8, 2, 7, 5, 9, 7, 3, 6, 5, 3, 5, 4, 1, 6, 6, 4, 4, 3, 2, 0, 1, 2, 1, 3, 0, 2];
                    var data3 = [25, 3, 0, 3, 1, 10, 2, 3, 33, 10, 26, 50, 49, 80, 101, 124, 113, 184, 298,
                        324, 356, 427, 417, 802, 690, 643, 849, 1016, 1223, 1266, 1209, 1451, 1769, 1742, 1439, 2116, 2058, 2288, 3203, 2492, 2292, 2570, 2410, 2389, 1923, 1487, 1502, 1543, 1422, 1152, 1471, 1242, 1255, 1390, 1335, 816, 893, 896, 795, 703, 561, 490, 447, 444, 487, 391, 530, 367, 467, 317, 271, 173, 145, 141, 150, 183, 69, 59, 69, 45, 49, 28, 17, 57];
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }
                    option = {
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                       dataView : {
                                    show : true,
                                    readOnly : true,
                                    optionToContent : function(opt) {
                                        //console.info(opt);
                                        var axisData = opt.xAxis[0].data;
                                        var series = opt.series;
                                        var tdHeaders = '<td>时间</td>'; //表头
                                        series.forEach(function(item) {
                                            tdHeaders += '<td>' + item.name + '</td>'; //组装表头
                                        });
                                        var table = '<div class="table-responsive"><table class="table table-bordered table-striped table-hover" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
                                        var tdBodys = ''; //数据
                                        for (let i = 0, l = axisData.length; i < l; i++) {
                                            for (let j = 0; j < series.length; j++) {
                                                tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
                                            }
                                            table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                            tdBodys = '';
                                        }

                                        table += '</tbody></table></div>';
                                        return table;
                                    }
                                },
                                restore:{},
                                saveAsImage: {}
                            }
                        },
                        title: {
                            text: '新增(确诊、治愈、死亡)',
                            top: '7%'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['新增确诊', '新增治愈', '新增死亡'],
                            top: '7%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },

                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '新增确诊',
                                type: 'line',
                                stack: '新增确诊',
                                data: data1
                            },
                            {
                                name: '新增治愈',
                                type: 'line',
                                stack: '新增治愈',
                                data: data3
                            },
                            {
                                name: '新增死亡',
                                type: 'line',
                                stack: '新增死亡',
                                data: data2
                            }

                        ]
                    };

                    myChart.setOption(option)
                </script>
                <div style="width: 1218px; height: 200px; padding: 0">
                    <table class="table table-hover table-bordered  table-sm" style="text-align:center; width:
                700px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                新增(确诊、治愈、死亡)分析
                            </th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>新增确诊</td>
                            <td>1/20至2/12每日增加人数呈上涨趋势，之后人数增加呈下降趋势，其中2/11至2/12人数急剧上涨</td>
                        </tr>
                        <tr>
                            <td>新增治愈</td>
                            <td>2/1至2/20增长情况呈平稳上升趋势</td>
                        </tr>
                        <tr>
                            <td>新增死亡</td>
                            <td>基本平稳</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div style="width: 1218px; height: 500px; padding: 0">
                <div id="container3" style="width: 100%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container3'));
                    var base = +new Date(2020, 0, 19);
                    var date = [];
                    var oneDay = 24 * 3600 * 1000;
                    var date1 = [270, 375, 444, 549, 729, 1052, 1423, 2714, 3554, 4586, 5806, 7153, 9074,
                        11177, 13522, 16678, 19665, 22112, 24953, 27100, 29631, 31728, 33366, 48206, 51986, 54406, 56249, 58182, 59989, 61682, 62031, 62662, 63454, 64084, 64287, 64786, 65187, 65596, 65914, 66337, 66907, 67103, 67217, 67332, 67466, 67592, 67666, 67707, 67743, 67760, 67773, 67781, 67786, 67790, 67794, 67798, 67799, 67800, 67800, 67800, 67800, 67800, 67800, 67801, 67801, 67801, 67801, 67801, 67801, 67801, 67801, 67802, 67802, 67802, 67803, 67803, 67803, 67803, 67803, 67803, 67803, 67803, 67803, 67803];
                    var date2 = [6, 9, 17, 24, 39, 52, 76, 100, 125, 162, 204, 249, 294, 350, 414, 479,
                        549, 618, 699, 780, 871, 974, 1068, 1310, 1426, 1457, 1596, 1696, 1789, 1921, 2029, 2144, 2250, 2346, 2495, 2563, 2615, 2641, 2682, 2727, 2761, 2803, 2834, 2871, 2902, 2931, 2959, 2986, 3007, 3024, 3046, 3056, 3062, 3075, 3085, 3099, 3111, 3122, 3130, 3132, 3139, 3144, 3153, 3160, 3163, 3169, 3174, 3177, 3182, 3186, 3187, 3193, 3199, 3203, 3207, 3210, 3212, 3212, 3213, 3215, 3216, 3219, 3219, 3221];
                    var date3 = [25, 28, 28, 31, 32, 42, 44, 47, 80, 90, 116, 166, 215, 295, 396, 520, 633,
                        817, 1115, 1439, 1795, 2222, 2639, 3441, 4131, 4774, 5623, 6639, 7862, 9128, 10337, 11788, 13557, 15299, 16738, 18854, 20912, 23200, 26403, 28895, 31187, 33757, 36167, 38556, 40479, 41966, 43468, 45011, 46433, 47585, 49056, 50298, 51553, 52943, 54278, 55094, 55987, 56883, 57678, 58381, 58942, 59432, 59879, 60323, 60810, 61201, 61731, 62098, 62565, 62882, 63153, 63326, 63471, 63612, 63762, 63945, 64014, 64073, 64142, 64187, 64236, 64264, 64281, 64338];
                    for (var i = 1; i < 86; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }
                    option = {
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                       dataView : {
                                    show : true,
                                    readOnly : true,
                                    optionToContent : function(opt) {
                                        //console.info(opt);
                                        var axisData = opt.xAxis[0].data;
                                        var series = opt.series;
                                        var tdHeaders = '<td>时间</td>'; //表头
                                        series.forEach(function(item) {
                                            tdHeaders += '<td>' + item.name + '</td>'; //组装表头
                                        });
                                        var table = '<div class="table-responsive"><table class="table table-bordered table-striped table-hover" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
                                        var tdBodys = ''; //数据
                                        for (let i = 0, l = axisData.length; i < l; i++) {
                                            for (let j = 0; j < series.length; j++) {
                                                tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
                                            }
                                            table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                            tdBodys = '';
                                        }

                                        table += '</tbody></table></div>';
                                        return table;
                                    }
                                },
                                restore:{},
                                saveAsImage: {}
                            }
                        },
                        title: {
                            text: '累计(确诊、治愈、死亡)',
                            top: '7%'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['累计确诊', '累计治愈', '累计死亡'],
                            top: '7%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },

                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '累计确诊',
                                type: 'line',
                                stack: '累计确诊',
                                data: date1
                            },
                            {
                                name: '累计治愈',
                                type: 'line',
                                stack: '累计治愈',
                                data: date3
                            },
                            {
                                name: '累计死亡',
                                type: 'line',
                                stack: '累计死亡',
                                data: date2
                            }
                        ]
                    };

                    myChart.setOption(option)
                </script>

                <div style="width: 1218px; height: 200px; padding: 0">
                    <table class="table table-hover table-bordered  table-sm" style="text-align:center; width:
                700px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                累计(确诊、治愈、死亡)分析
                            </th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>累计确诊</td>
                            <td>截至2/29呈上升趋势，而后平稳</td>
                        </tr>
                        <tr>
                            <td>累计治愈</td>
                            <td>呈上升趋势</td>
                        </tr>
                        <tr>
                            <td>累计死亡</td>
                            <td>截止2/14小幅上升，之后呈平稳趋势</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div style="width: 1218px; height: 600px">
                <div id="container" style="width: 1218px; height: 600px"></div>
                <script th:inline="javascript">
                    //将图标实例化和容器关联
                    var myChart = echarts.init(document.querySelector('#container'));
                    var weburl = [[${webUrl}]]
                    fetch(weburl)
                        .then(res => res.json())
                        .then(res => {
                            // console.log(res); // 获取到的数据
                            var getAreaStat = res.getAreaStat;
                            // console.log(getAreaStat); // 获取到的数据

                            // 将接口返回的数据进行处理 转为echarts认可的数据
                            var filterData = [];
                            var cities = [];
                            var hubei = [];

                            getAreaStat.forEach(item => {
                                filterData.push({
                                    name: item.provinceShortName,
                                    value: item.confirmedCount,
                                    deadCount: item.deadCount,
                                    curedCount: item.curedCount,
                                    cites: item.cities
                                });
                            });

                            filterData.forEach(item => {
                                cities.push({
                                    city: item.cites
                                })
                            })
                            // [{name: '湖北', value: 5556,deadCount: 6, curedCount: 4}, ...]
                            // console.log(filterData)
                            // console.log(cities[0].city)
                            //配置图标数据信息)
                            cities[0].city.forEach(item => {
                                hubei.push({
                                    name: item.cityName,
                                    value: item.confirmedCount,
                                    deadCount: item.deadCount,
                                    curedCount: item.curedCount,
                                });
                            });
                            console.log(hubei)

                            myChart.setOption({
                                // 标题
                                title: {
                                    text: '湖北疫情分布图',
                                    left: 'center'
                                },
                                // 图标的背景
                                background: "#f7f7f7",

                                visualMap: [
                                    {
                                        type: 'piecewise', // continuous连续的 piecewise分段
                                        pieces: [
                                            {min: 10000}, // (10000, Infinity]
                                            {min: 1000, max: 9999}, // (1000, 9999]
                                            {min: 100, max: 999}, // (100, 999]
                                            {min: 10, max: 99}, // (10, 99]
                                            {gt: 0, lte: 9} // (0, 9]
                                        ],
                                        inRange: {
                                            color: ['#fdebcf', '#f59e83', '#e55a4e', '#cb2a2f', '#811c24']
                                        }
                                    }
                                ],

                                tooltip: {
                                    // triggerOn: 'click',
                                    formatter: function (params) {
                                        // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                                        console.log(params, 'formatter')
                                        return `地区：${params.name}<br/>确诊：${params.value || 0}人<br/>治愈：${(params.data &&
                                            params.data.curedCount) || 0}人<br/>死亡：${(params.data && params.data.deadCount) || 0}人<br/>`
                                    }
                                },

                                series: [
                                    {
                                        type: 'map', // 当前图标的类型
                                        map: 'hubei', //当前地图为中国
                                        label: {
                                            // 覆盖物设置
                                            show: true
                                        },
                                        data: hubei
                                    }
                                ]
                            })
                        })
                </script>
            </div>

            <a class="btn btn-sm btn-primary" th:href="@{/page1}" style="float: right">返回</a>

        </main>
    </div>
</div>
</body>
</html>